<template>
  <ul class="fx-pagination-pages">
    <li v-if="isMore&&previousPageShow" @click="pageTo(currentPage-5<=1?1:currentPage-5)">
      <i class="iconfont icon-more"></i>
    </li>
    <li v-for="item in pagesArr" :key="item" @click="pageTo(item)" :class="{active:currentPage===item}">
      {{ item }}
    </li>
    <li v-if="isMore&&nextPageShow" @click="pageTo(currentPage+5>=pageTotal?pageTotal:currentPage+5)">
      <i class="iconfont icon-more"></i>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'paginationPages',
  props: {
    pagesArr: {
      type: Array as PropType<number[]>,
      default: () => []
    },
    currentPage: {
      type: Number as PropType<number>,
      default: 0
    },
    pageTotal: {
      type: Number as PropType<number>,
      default: 0
    },
    previousPageShow: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    nextPageShow: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    // 是否显示更多按钮
    isMore: {
      type: Boolean as PropType<boolean>,
      default: true
    }
  },
  setup (props, ctx) {
    const pageTo = (num: number) => {
      ctx.emit('pagesChange', num)
    }

    return {
      pageTo
    }
  }
})
</script>
